<template>
  <view>
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      @scroll="scrollFn"
      scroll-with-animation
      class="law-container"
    >
      <p class="title">《中华人民共和国劳动合同法》</p>
      <view class="catalogue">
        <p
          @click="goTo(`Z${index + 1}`)"
          v-for="(item, index) in lawJson"
          :key="index"
          :style="{
            lineHeight: '80rpx',
            marginLeft: index >= 5 && index <= 7 ? '20rpx' : '0rpx',
          }"
        >
          {{ item.title }}
        </p>
      </view>
      <view class="divider"></view>
      <view v-for="(item2, index2) in lawJson" :key="index2">
        <p
          :id="`Z${index2 + 1}`"
          :style="{
            color: active == `Z${index2 + 1}` ? 'rgb(255, 183, 173)' : '#000',
            fontWeight: index2 >= 5 && index2 <= 7 ? '500' : 'bold',
          }"
          class="section"
        >
          {{ item2.title }}
        </p>
        <view v-for="(text, j) in item2.content" :key="j" class="text-box">
          <p style="text-indent: 2em">{{ text }}</p>
        </view>
      </view>
    </scroll-view>
    <movable-box :movableStyle="movableStyle" :balls="balls">
      <template #slot1>
        <img class="img-box" src="../static/img/goTop.png" alt="" />
      </template>
      <template #slot2>
        <img class="img-box" src="../static/img/service.png" alt="" />
      </template>
    </movable-box>
  </view>
</template>

<script setup>
import lawJson from "./law.json";
import { ref, nextTick } from "vue";
// import { movableBox } from "../components/u-movable/index.vue";

const scrollTop = ref(0);
const old = ref({ scrollTop: 0 });
const active = ref("");

let movableStyle = ref({
  width: 40,
  height: 40,
  top: 400,
  right: 0,
});
let balls = ref([
  {
    angle: 0,
    style: { right: 0, top: 0, width: 0, height: 0, opacity: 0 },
    slotName: "slot1",
    fn: ballsFn1,
  },
  {
    angle: 0,
    style: { right: 0, top: 0, width: 0, height: 0, opacity: 0 },
    slotName: "slot2",
    feedback: true,
  },
]);

const goTo = (id) => {
  active.value = id;
  const query = wx.createSelectorQuery();
  query.select(`#${id}`).boundingClientRect();
  query.selectViewport().scrollOffset();
  query.exec(function (res) {
    scrollTop.value = res[0].top + res[1].scrollTop;
  });
  setTimeout(() => {
    active.value = "";
  }, 2000);
};

// 回到顶部
function ballsFn1() {
  scrollTop.value = old.value.scrollTop;
  nextTick(() => {
    scrollTop.value = 0;
  });
  active.value = "";
}

// 保存当前距离页面顶部的位置
const scrollFn = (e) => {
  old.value.scrollTop = e.detail.scrollTop;
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
.law-container {
  width: calc(100% - 80rpx);
  height: calc(100vh - 4rpx);
  border-radius: 10rpx;
  border: 2rpx solid rgb(255, 183, 173);
  margin: 0 20rpx;
  text-align: center;
  padding: 0 20rpx;
  .title {
    color: rgb(236, 16, 16);
    font-size: 42rpx;
    font-weight: bold;
    line-height: 140rpx;
  }
  .catalogue {
    text-align: left !important;
    font-weight: 600;
    text-decoration: underline;
  }
  .divider {
    width: 100%;
    height: 2px;
    border-bottom: 2rpx dotted rgb(255, 183, 173);
    margin-bottom: 50rpx;
  }
  .section {
    padding: 20rpx 0;
    transition: all 0.4s ease;
    margin-top: 10rpx;
  }
  .text-box {
    padding-bottom: 20rpx;
    font-size: 28rpx;
    color: #525252;
    line-height: 40rpx;
    text-align: justify;
  }
}
.img-box {
  width: 100%;
  height: 100%;
}
</style>